<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试结果</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="../css/test.css">
    <link href="../css/flat/blue.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <!--<div id="addddd"></div>-->
    <div class="time">剩余时间 <span id="remainTime"></span></div>
    <div class="questions_content_box" v-for="(listData,index) in list">
        <div style="height: 0.3rem"></div>
        <!--文字-->
        <div style="height: 0.5rem"></div>
        <div class="title">
            <span>{{index+1}}.</span><span class="title_content">{{listData.questions_content}} </span>
        </div>
        <div class="radio_box" v-if="listData.option_content_type == 1">
            <!--文字单选-->
            <div v-if="listData.questions_type == 1">
                <div class="radio"  v-for="(da,key) in listData.questions_option">
                    <div class="input_box">
                        <input type="radio" :name="index" v-model="listData.judge" :value="key" @change="examine(index,listData.judge,listData.questions_id,listData.questions_type)">
                    </div>
                    <div><span style="margin-top: 0.2rem">{{key}}.</span><span>{{da.text}} </span></div>
                </div>
            </div>
            <!--文字多选-->
            <div v-if="listData.questions_type == 2">
                <div class="radio"  v-for="(da,key) in listData.questions_option">
                    <div class="input_box">
                        <input type="checkbox" :name="index" v-model="listData.answer" :value="key" @change="examine(index,listData.answer,listData.questions_id,listData.questions_type)">
                    </div>
                    <div><span>{{key}}.</span><span>{{da.text}}</span></div>
                </div>
            </div>
        </div>
        <div class="radio_box" v-if="listData.option_content_type == 2">
            <!--图片单选-->
            <div v-if="listData.questions_type == 1">
                <div class="img_box" v-for="(da,key) in listData.questions_option">
                    <div class="input_box">
                        <!--<input type="radio" :name="index">-->
                        <input type="radio" :name="index" v-model="listData.judge" :value="key" @change="examine(index,listData.judge,listData.questions_id,listData.questions_type)">
                    </div>
                    <div>
                        <span>{{key}}.</span>
                        <img :src="da.image" alt="">
                    </div>
                </div>
            </div>
            <!--图片多选-->
            <div v-if="listData.questions_type == 2">
                <div class="img_box" v-for="(da,key) in listData.questions_option">
                    <div class="input_box">
                        <!--<input type="checkbox">-->
                        <input type="checkbox" :name="index" v-model="listData.answer" :value="key" @change="examine(index,listData.answer,listData.questions_id,listData.questions_type)">
                    </div>
                    <div>
                        <span>{{key}}.</span>
                        <img :src="da.image" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="height: 1rem;clear: both"></div>
    <div class="tj_btn_1" id="postData" @click="postData">提交</div>
    <div class="tj_btn_2" style=" height: 1.306rem"></div>
    <!--<div class="ceshi_1"></div>-->
    <!--<div class="ceshi_2"></div>-->
</div>
</div>

</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script src="../js/jquery.js"></script>
<script src="../js/jquery.icheck.js"></script>
<script src="../js/rem.js"></script>
<script src="../js/test.js"></script>
<script>

    var SysSecond;
    var InterValObj;
    var timeSop = false;
    var alertText = '' ;
    var susses = false;
    var  appData = JSON.parse(window.localStorage.appData);

//    window.localStorage.allData = {}
//    var allData;

    var app = new Vue({
        el: '#app',
        data: {
            data: {},
            list: {},
            information:'',
            postList:{
                exam_id: 3, // 测试id
                exam_num: 7, // 第N次参与测试
                curriculum_id: 4, // 课程id
                video_id: 20, // 视频id
                questions: [ // 用户答题数据
                    {},
                    {},
                    {},
                    {},
                    {},
                    {},
                    {},
                    {},
                    {},
                    {}
                ]
            }
        },
        created: function () {
            this.getData();
            var this_s = this;
            $(document).ready(function() {
                if( typeof(window.localStorage.time) == 'undefined'){
                    SysSecond = 600; //这里获取倒计时的起始时间
                    console.log('666')
                }else {
                    SysSecond = window.localStorage.time;
                }
                InterValObj = window.setInterval(SetRemainTime, 1000); //间隔函数，1秒执行
            });//将时间减去1秒，计算分、秒
            function SetRemainTime() {
                if (SysSecond > 0) {
                    SysSecond = SysSecond - 1;
                    window.localStorage.time = SysSecond;
//                    console.log('存储时间',window.localStorage.time)
                    var second = Math.floor(window.localStorage.time % 60);             // 计算秒     
                    var minite = Math.floor((window.localStorage.time / 60) % 60);      //计算分
                    second = second < 10 ? "0" + second : second
                    $("#remainTime").html( minite + ":" + second);
                } else {//剩余时间小于或等于0的时候，就停止间隔函数
                    window.clearInterval(InterValObj);
                    //这里可以添加倒计时时间为0后需要执行的事件
                    timeSop = true;
                    this_s.postData()
                }
            }
        },
        methods: {
            getData: function () {
                var that = this;
                $.ajax({
                    url: "/api/exam/questions",    //请求的url地址
                    headers: {
                        appid: '1',
                        appsecret: '39b3567d0b8ac89c025b78beec26acb0',
                        uid: appData.uid,
                        token: appData.token
//                        uid: '16',
//                        token: 'd0ad480c22e2cc3968883e1dd5311480'
                    },
                    dataType: "json",   //返回格式为json
                    async: true,
                    data: {curriculum_id:appData.curriculum_id , video_id: appData.video_id},    //参数值 由APP传递
//                    data: {curriculum_id: 4, video_id: 11},    //参数值 由APP传递
                    type: "post",
                    success: function (req) {
//                        $('#ceshi_1').html(req);
                        if(req.code==1011){
                            alert(req.msg)
                            return false
                        }
                        if(req.data.questions.length<1){
                            alert('暂时没有测试题哟~！')
                            return false
                        }
                        //请求成功时处理
                        if(req.code == 200){
                            susses = true;
//                            localStorage.removeItem('allData');
                            if(typeof(window.localStorage.allData) == 'undefined'){
//                                window.localStorage.allData = 200;
                                window.localStorage.allData =JSON.stringify(req.data)
                                that.data =JSON.parse(window.localStorage.allData);
                                that.list = that.data.questions;
//                                console.log('', that.data)
//                                console.log('无', that.data,that.list)
                            } else {
                                that.data = JSON.parse(window.localStorage.allData);
                                that.list = that.data.questions
//                                console.log('有',that.data,that.list)
                            }
                        }

                        setTimeout(function () {
                            $('input').iCheck({
                                checkboxClass: 'icheckbox_flat-blue',
                                radioClass: 'iradio_flat-blue'
                            });
                        },0);

                        console.log('长度',that.data);
                        $.each(that.data.questions,function (index,itm) {
                            itm.judge = '';
//                            console.log('循环',index,itm)
                            if(itm.questions_type == 2){
//                              console.log('多选',that.data.questions[index])
                                that.data.questions[index].answer = [];
//                                console.log( '多选复制', that.data.questions[index].answer)
                            }
                            $.each(that.postList.questions,function (dex,it) {
                                if(index==dex){
                                    it.questions_id = itm.questions_id;
                                    it.questions_answer = '';
                                }
//                                console.log('that.postList.questions',that.postList.questions)
                            })
                        })
                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        //请求出错处理
                    }
                });
            },
            postData:function () {
//               $('#postData').html('进入');
                var that = this;
                alertText ='';
                var notHas = true;
                var dataList = that.postList;
                dataList.exam_id = that.data.exam_id;
                dataList.exam_num =that.data.exam_num;
                dataList.video_id = appData.video_id;//video_id 由APP 传到本地
//                dataList.video_id = 11;//video_id 由APP 传到本地
                dataList.curriculum_id =  appData.curriculum_id;//curriculum_id 由APP 传到本地
//                dataList.curriculum_id =  4;//curriculum_id 由APP 传到本地

//                console.log('需要上传的答应',dataList)

                $.each(dataList.questions,function (index,itm) {
//                   console.log(' 上传数据',dataList.questions[index])
                    if(dataList.questions[index].questions_answer == ''){
                        console.log('无数据数据',itm)
                        notHas = false;
                        alertText += (index+1) +','
                        console.log('那些题没有做',alertText)
                    }else {
                        console.log('有数据',itm)
                    }
                });
                console.log('终极答案',dataList)
                if(timeSop == false&&notHas == false){ //提示为完成题目
//                    alert(alertText+'题还没有选择答案哟~！')
//                    $('#addddd').html(JSON.stringify(dataList));
                    return false
                }
                var anwserList =JSON.stringify(dataList);


                    $.ajax({
                    url: "/api/exam/submit",    //请求的url地址
                    headers: {
                        appid: '1',
                        appsecret: '39b3567d0b8ac89c025b78beec26acb0',
                        uid: appData.uid,
                        token: appData.token
//                        uid: '16',
//                        token: 'd0ad480c22e2cc3968883e1dd5311480'
                    },
                    dataType: "json",
                    async: true,
                    data: {answer_data:anwserList},    //参数值
                    type: "post",
                    success: function (req) {
                        if(req.code == 200){
                            //            删除缓存
                            window.localStorage.removeItem('time');
                            window.localStorage.removeItem('allData');
//                            console.log('time',window.localStorage.time)
//                            console.log('allData',window.localStorage.allData)
                            if(req.data.is_pass == 1){
                                window.location.href='testPass.html?exam_score='+req.data.exam_score+''
                            }
                            if(req.data.is_pass == 0){
                                window.location.href='notPass.html?exam_score='+req.data.exam_score+''
                            }

                        }else {
                            alert(req.msg)
                        }

                    },
                    complete: function () {
                        //请求完成的处理
                    },
                    error: function () {
                        //请求出错处理
                    }
                });
            },
            examine:function (indexData,keyData,questions_id,questions_type) {
                console.log('点击事件',indexData+1,keyData,questions_id,questions_type);
                var self = this;
                if(questions_type == 1){
//                    self.postList.questions[indexData].questions_id =questions_id;
                    self.postList.questions[indexData].questions_answer =keyData;

                }
                if(questions_type == 2){
//                    self.postList.questions[indexData].questions_id =questions_id;
                    self.postList.questions[indexData].questions_answer = keyData.toString()
                }
            }
        }

    })
</script>
</html>